<template>
  <el-drawer
    title="上传任务列表"
    :visible="taskListViewFlag"
    direction="btt"
    :modal="false"
    append-to-body
    class="upload-drawer"
    :before-close="handleClose"
    destroy-on-close
    :size="400"
  >
    <el-table
      empty-text="暂无传输任务"
      :data="uploadTaskList"
      height="300px"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        header-align="center"
        label="文件名称"
        prop="filename"
        width="120"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="文件状态"
        width="120"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>状态: {{ scope.row.statusText }}</p>
            <div slot="reference" class="name-wrapper">
              <el-button
                v-show="scope.row.status === fileStatus.WAITING.code"
                size="mini"
                icon="el-icon-watch"
                circle
              ></el-button>
              <el-button
                v-show="scope.row.status === fileStatus.PAUSE.code"
                size="mini"
                type="warning"
                icon="el-icon-video-play"
                circle
              ></el-button>
              <el-button
                v-show="scope.row.status === fileStatus.UPLOADING.code"
                size="mini"
                type="success"
                icon="el-icon-upload2"
                circle
              ></el-button>
              <el-button
                v-show="scope.row.status === fileStatus.FAIL.code"
                size="mini"
                type="danger"
                icon="el-icon-error"
                circle
              ></el-button>
              <el-button
                v-show="scope.row.status === fileStatus.PARSING.code"
                size="mini"
                type="info"
                icon="el-icon-loading"
                circle
              ></el-button>
              <el-button
                v-show="scope.row.status === fileStatus.MERGE.code"
                size="mini"
                type="primary"
                icon="el-icon-cpu"
                circle
              ></el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="上传进度"
        width="180"
      >
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>上传速度: {{ scope.row.speed }}</p>
            <p>
              上传大小: {{ scope.row.uploadedSize }}/{{ scope.row.fileSize }}
            </p>
            <p>剩余时间: {{ scope.row.timeRemaining }}</p>
            <div slot="reference" class="name-wrapper">
              <el-progress
                :stroke-width="13"
                :color="colors"
                :percentage="scope.row.percentage"
              ></el-progress>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-tooltip
            v-show="scope.row.status === fileStatus.UPLOADING.code"
            class="item"
            effect="light"
            content="暂停上传"
            placement="top"
          >
            <el-button
              @click="pauseUpload(scope.row.filename)"
              size="mini"
              type="info"
              icon="el-icon-video-pause"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            v-show="scope.row.status === fileStatus.PAUSE.code"
            class="item"
            effect="light"
            content="继续上传"
            placement="top"
          >
            <el-button
              @click="resumeUpload(scope.row.filename)"
              size="mini"
              type="success"
              icon="el-icon-video-play"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            v-show="
              scope.row.status === fileStatus.UPLOADING.code ||
              scope.row.status === fileStatus.WAITING.code ||
              scope.row.status === fileStatus.PAUSE.code
            "
            class="item"
            effect="light"
            content="取消上传"
            placement="top"
          >
            <el-button
              @click="cancelUpload(scope.row.filename)"
              size="mini"
              icon="el-icon-error"
              circle
            ></el-button>
          </el-tooltip>
          <el-tooltip
            v-show="scope.row.status === fileStatus.FAIL.code"
            class="item"
            effect="light"
            content="重新上传"
            placement="top"
          >
            <el-button
              @click="retryUpload(scope.row.filename)"
              size="mini"
              type="warning"
              icon="el-icon-refresh-right"
              circle
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import panUtil from '@/utils/common'
export default {
  data() {
    return {
      drawer: true,
      colors: [
        { color: '#909399', percentage: 30 },
        { color: '#e6a23c', percentage: 70 },
        { color: '#67c23a', percentage: 100 },
      ],
      fileStatus: panUtil.fileStatus,
    }
  },
  methods: {
    handleClose() {
      this.updateTaskListViewFlag(false)
    },
    ...mapMutations({
      pauseTask: 'task/pause',
      resumeTask: 'task/resume',
      cancelTask: 'task/cancel',
      retryTask: 'task/retry',
      addTaskItem: 'task/add',
      changeTaskListView: 'task/changeViewFlag',
      updateTaskListViewFlag: 'task/updateViewFlag',
    }),
    pauseUpload(filename) {
      this.pauseTask(filename)
    },
    resumeUpload(filename) {
      this.resumeTask(filename)
    },
    cancelUpload(filename) {
      this.cancelTask(filename)
      this.$message.info('文件：' + filename + ' 取消上传')
    },
    retryUpload(filename) {
      this.retryTask(filename)
    },
  },
  computed: {
    ...mapGetters([
      'uploadTaskFlag',
      'uploadTaskNum',
      'uploadTaskList',
      'taskListViewFlag',
    ]),
  },
  mounted() {
    const taskItem = {
      filename: 'aaa',
    }
    // this.addTaskItem(taskItem)
    // this.addTaskItem(taskItem)
    // this.updateTaskListViewFlag(true)
  },
}
</script>
<style lang="scss">
.upload-drawer {
  .el-drawer__container {
    width: 600px;
    left: auto;
    position: fixed;
  }
}
</style>
